export default {
	wave: {
		created(el, binding, vnode) {
			// el.addEventListener('animationend', () => {
			//     ripple.remove();
			//   });
		},
		beforeMount(el, binding, vnode) {},
		mounted(el, binding, vnode) {
			const style = getComputedStyle(el);
			const position = style.position;
			const overflow = style.overflow;
			el.addEventListener('click', (event) => {
				el.style.position = 'relative';
				el.style.overflow = 'hidden';

				const config = binding.value || {};
				const color = config.color;
				const duration = config.duration;

				const ripple = document.createElement('span');
				ripple.classList.add('ripple');
				const rect = el.getBoundingClientRect();
				const size = Math.max(rect.width, rect.height);
				// const width = rect.width;
				// const height = rect.height;
				const x = event.clientX - rect.left - size / 2;
				const y = event.clientY - rect.top - size / 2;
				ripple.style.width = `${size}px`;
				ripple.style.height = `${size}px`;
				ripple.style.left = `${x}px`;
				ripple.style.top = `${y}px`;

				if (color) ripple.style.background = color;
				if (duration) ripple.style.animationDuration = duration;

				el.appendChild(ripple);
				el.addEventListener('animationend', () => {
					ripple.remove();
					el.style.position = position;
					el.style.overflow = overflow;
				});
			});
		},

		beforeUpdate(el, binding, vnode, prevVnode) {},
		updated(el, binding, vnode, prevVnode) {},
		beforeUnmount(el, binding, vnode) {},
		unmounted(el, binding, vnode) {}
	}
};
